<!--suppress ALL-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Amber - Pet Care Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <script th:src="@{/assets/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>

</head>

<body>
    <!-- Header Section Start -->
<div class="header section" th:replace="~{common/head::head}"></div>
    <!-- Header Section End -->

    <!-- Breadcrumb Area Start -->
    <div class="section breadcrumb-area bg-name-bright">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="breadcrumb-wrapper">
                        <h2 class="breadcrumb-title">我的购物车</h2>
                        <ul>
                            <li><a th:href="@{/goods/show}">Home</a></li>
                            <li>Wishlist</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

    <!-- Shopping Cart Section Start -->
    <div class="section section-margin" id="app">
        <div class="container">

            <div class="row">
                <div class="col-12" style="margin-top: -70px">

                    <!-- Cart Table Start -->
                    <div class="cart-table table-responsive" >
                        <table class="table table-bordered">

                            <!-- Table Head Start -->
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="checkAll" @click="checkAll()" value="100">全选</th>
                                    <th >封面</th>
                                    <th >商品</th>
                                    <th >单价</th>
                                    <th >数量</th>
                                    <th >金额</th>
                                    <th >删除</th>
                                </tr>
                            </thead>
                            <!-- Table Head End -->

                            <!-- Table Body Start -->
                            <tbody>
                                <tr v-for="c in cartList">
                                    <td>
                                        <input :id="c.cartId" class="checkOne" type="checkbox" @change="chenckOnChange"/>
                                    </td>
                                    <td class="pro-thumbnail" >
                                        <div >
                                            <img :src="'Http://localhost:8080/uploadFile/product/'+c.cover" alt="商品图片" style="width: 50px;height: 50px">
                                        </div>

                                    </td>
                                    <td class="pro-title" >{{c.goodsName}}</td>
                                    <td class="pro-price" ><span>{{c.salePrice}}</span></td>
                                    <td class="pro-quantity">
                                        <input class="pro-count" :value="c.buyCount" type="number" @change="numOnChange($event,c.cartId)" min="1">
                                    </td>
                                    <td class="pro-subtotal" ><span>{{c.allPrice}}</span></td>
                                    <td class="pro-remove"><a @click="removeOrder(c.cartId)"><i class="ti-trash"></i></a></td>
                                </tr>

                            </tbody>
                            <!-- Table Body End -->
                        </table>
                    </div>
                    <!-- Cart Table End -->

                    <!-- Cart Button Start -->
                    <div class="cart-button-section m-b-n20">

                        <!-- Cart Button left Side Start -->
                        <div class="cart-btn-lef-side m-b-20">
                            <a th:href="@{/goods/show}" class="btn btn btn-gray-deep btn-hover-primary">继续购物</a>
                        </div>
                        <!-- Cart Button left Side End -->

                        <!-- Cart Button Right Side Start -->
                        <div class="cart-btn-right-right m-b-20">
                            <a @click="removeAllOrder()" class="btn btn btn-gray-deep btn-hover-primary">清空购物车</a>
                        </div>
                        <!-- Cart Button Right Side End -->
                    </div>
                    <!-- Cart Button End -->

                </div>
            </div>

            <div class="row m-t-50">
                <div class="col-lg-12 me-0 ms-auto">

                    <!-- Cart Calculation Area Start -->
                    <div class="cart-calculator-wrapper">

                        <!-- Cart Calculate Items Start -->
                        <div  class="cart-calculate-items">
                            <!-- Responsive Table Start -->
                            <div class="table-responsive ">
                                <span>已选商品 <span class="total-count" style="font-size: 30px;color: red" >{{allCount}}</span> 件</span>

                                <div style="float: right;width: 250px">
                                    <span>合计:</span>
                                    <span>¥<span class="total-amount" style="font-size: 30px;color: red" :html="totalPrice">{{totalPrice}}</span></span>
                                    <button type="button" class="btn btn-danger btn-hover-primary m-t-30" style="float: right" onclick="goPay()">结算</button>
                                </div>

                            </div>

                            <!-- Responsive Table End -->

                        </div>
                        <!-- Cart Calculate Items End -->
                    </div>
                    <!-- Cart Calculation Area End -->

                </div>
            </div>

        </div>
    </div>
    <!-- Shopping Cart Section End -->

    <!-- Footer Section Start -->
    <footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>


    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>
    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>


    <form id="orderForm" th:action="@{/cart/cartToAddress}" method="post">
        <input type="hidden" name="cartIds" id="cartIds">
    </form>
</body>
    <script>

        let vueApp = new Vue({
            el:"#app",
            data:{
                cartList:[],//从后台返回的订单的集合
                totalPrice:0,//结算总价
                allCount:0,//已选商品件数
                checkList:[],//所有单选框的集合

            },
            created(){
                this.getOrder()
            },
            methods:{
                getOrder(){
                    axios.get("Http://localhost:9001/cart/myCart").then((res)=>{
                        this.cartList = res.data.data
                    })
                },
                allPrice(){//改变总价的方法
                    vueApp.allCount = 0
                    vueApp.totalPrice = 0
                    this.checkList = $(".checkOne")
                    this.checkList.each(function () {
                        if($(this).prop("checked")){
                            let id = this.id
                            axios.get("Http://localhost:9001/cart/allPrice",{
                                params:{
                                    cartId: id
                                }
                            }).then((res)=>{
                                console.log(res);
                                vueApp.totalPrice += res.data.data.allPrice
                                vueApp.allCount += 1
                            })
                        }
                    })
                },
                checkAll(){//设置全选全消
                    let isCheckAll = $("#checkAll").prop("checked")
                    this.checkList = $(".checkOne")
                    this.checkList.each(function () {
                        $(this).prop("checked",isCheckAll)
                    })
                    vueApp.allPrice()
                },
                chenckOnChange(){//给每一个单选框设置change事件
                    $("#checkAll").prop("checked",true)
                    $(".checkOne").each(function (index,item) {
                        if(!$(item).prop("checked")){
                            $("#checkAll").prop("checked",false)
                        }
                    })
                    this.allPrice()
                },
                numOnChange(event,id){
                    let isCHeck = $('#'+id).prop("checked")//获得当前行是否被选中
                    let count = $(event.target).val() ;//改变后的商品数量
                    axios.get("Http://localhost:9001/cart/myCount",{
                        params:{
                            cartId:id,
                            buyCount:count
                        }
                    }).then((res)=>{
                        axios.get("Http://localhost:9001/cart/myCart").then((res)=>{
                            this.cartList = res.data.data
                            vueApp.checkList = $(".checkOne")
                            vueApp.checkList.each(function (index,item) {
                                if($(item).attr("id") == id){
                                    $(item).prop("checked",isCHeck)
                                }
                            })
                            vueApp.allPrice()
                        })
                    })
                },
                removeAllOrder(){
                    axios.get("Http://localhost:9001/cart/removeAllOrder").then((res)=>{
                        vueApp.cartList = []
                        $("#checkAll").prop("checked",false)
                    })
                },
                removeOrder(id){
                    console.log(id);
                    axios.get("Http://localhost:9001/cart/removeOrder",{
                        params:{
                            cartId:id
                        }
                    }).then((res)=>{
                        axios.get("Http://localhost:9001/cart/myCart").then((res)=>{
                            this.cartList = res.data.data
                            vueApp.allPrice()
                            vueApp.allCount-1
                        })
                    })
                },
                goPay(){
                    let ids = []
                    $(".checkOne").each(function (index,item) {
                        if($(item).prop("checked")){
                           ids.push($(item).attr("id"))
                        }
                    })
                    axios.get("Http://localhost:9001/cart/cartToAddress",{
                        params:{
                            cartIds:ids+''
                        }
                    }).then((res)=>{
                        location="Http://localhost:9001/checkout"
                        location="Http://localhost:9001/cart/cartToAddress?cartIds="+cartIds
                    })
                }
            }
        })

        function goPay() {
            let ids = []
            $(".checkOne").each(function (index,item) {
                if($(item).prop("checked")){
                    ids.push($(item).attr("id"))
                }
            })

            if(ids.length>0){
                let cartIds = ids+''
                location="Http://localhost:9001/cart/cartToAddress?cartIds="+cartIds
            }else{
                alert("请先选择要购买的商品!!!")
            }

        }

    </script>
</html>